<ion-header>
  <ion-navbar color="primary"> 
    <ion-title>告警</ion-title>
</ion-navbar>

</ion-header>

<ion-content (ionScroll)="check()">
  <!-- 搜索 -->
  <!-- <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> -->
  <!-- 告警数据 -->
  <div padding class="list">
    <ion-segment [(ngModel)]="alert">
      <ion-segment-button value="all">
        全部
      </ion-segment-button>
      <ion-segment-button value="processed">
        已处理
      </ion-segment-button>
      <ion-segment-button value="Untreated">
        未处理
      </ion-segment-button>
    </ion-segment>
  </div>



  <div [ngSwitch]="alert">
    <div *ngSwitchCase="'all'">
      <ion-card (click)="warnDetails(item.id,item.time,item['target'].type,item['target'].name,item['threshold'].name,item['threshold'].lower,item['threshold'].upper,item.message,item.status)"
        style="background-color:#de5454" *ngFor="let item of items" [ngStyle]="{'background-color':item.status == 1 ? '#6ab782' : '#de5454' }">
        <ion-row>
          <ion-col col-12 padding>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  告警时间：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  {{item.time}}
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  测点类型：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  <!-- {{item['target'].type}} -->
                  <span *ngIf="item['target'].type == 1">磁通量</span>
                  <span *ngIf="item['target'].type == 2">光纤光栅</span>
                  <span *ngIf="item['target'].type == 3">应力</span>
                  <span *ngIf="item['target'].type == 4">变形</span>
                  <span *ngIf="item['target'].type == 5">风速</span>
                  <span *ngIf="item['target'].type == 6">风振</span>
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  测点名称：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  {{item['target'].name}}
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  告警等级：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  <span>{{item['threshold'].name}}</span>
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  阈值范围：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                  <span>[</span>
                  <span>{{item['threshold'].lower}}</span>
                  <span>,</span>
                  <span>{{item['threshold'].upper}}</span>
                  <span>]</span>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  当前监测数据：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                  <span>{{item.message}}</span>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  是否处理：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                    <span *ngIf="item.status==0">未处理</span>
                    <span *ngIf="item.status==1">已处理</span>
                </ion-col>
              </ion-row>
            </div>
          </ion-col>
        </ion-row>
      </ion-card>

      <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多数据...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

      <div class="goTop" tapmode (click)="scrollTo()" id="top" *ngIf="top">
        <span class="TOP">↑</span>
      </div>

    </div>



    <div *ngSwitchCase="'processed'">
      <div id="topest"></div>

      <ion-card (click)="warnDetails(item.id,item.time,item['target'].type,item['target'].name,item['threshold'].name,item['threshold'].lower,item['threshold'].upper,item.message,item.status)"
        style="background-color:#6ab782" *ngFor="let item of items1">
        <ion-row *ngIf='item!=null'>
          <ion-col col-12 padding>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  告警时间：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  {{item.time}}
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  测点类型：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  <!-- {{item['quota'].name}} -->
                  <span *ngIf="item['target'].type == 1">磁通量</span>
                  <span *ngIf="item['target'].type == 2">光纤光栅</span>
                  <span *ngIf="item['target'].type == 3">应力</span>
                  <span *ngIf="item['target'].type == 4">变形</span>
                  <span *ngIf="item['target'].type == 5">风速</span>
                  <span *ngIf="item['target'].type == 6">风振</span>
                  <!-- {{item['target'].type}} -->
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  测点名称：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  {{item['target'].name}}
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  告警等级：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  <span>{{item['threshold'].name}}</span>
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  阈值范围：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                  <span>[</span>
                  <span>{{item['threshold'].lower}}</span>
                  <span>,</span>
                  <span>{{item['threshold'].upper}}</span>
                  <span>]</span>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  当前监测数据：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                  <span>{{item.message}}</span>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  是否处理：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                  <span>已处理</span>
                </ion-col>
              </ion-row>
            </div>
          </ion-col>
        </ion-row>
      </ion-card>

      <ion-infinite-scroll (ionInfinite)="doInfinite1($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多数据...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

      <div class="goTop" tapmode (click)="scrollTo()" id="top" *ngIf="top">
        <span class="TOP">↑</span>
      </div>


    </div>




    <div *ngSwitchCase="'Untreated'">

      <ion-card (click)="warnDetails(item.id,item.time,item['target'].type,item['target'].name,item['threshold'].name,item['threshold'].lower,item['threshold'].upper,item.message,item.status)"
        style="background-color:#de5454" *ngFor="let item of items2">
        <ion-row>
          <ion-col col-12 padding>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  告警时间：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  {{item.time}}
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  测点类型：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  <!-- {{item['quota'].name}} -->
                  <!-- {{item['target'].type}} -->
                  <span *ngIf="item['target'].type == 1">磁通量</span>
                  <span *ngIf="item['target'].type == 2">光纤光栅</span>
                  <span *ngIf="item['target'].type == 3">应力</span>
                  <span *ngIf="item['target'].type == 4">变形</span>
                  <span *ngIf="item['target'].type == 5">风速</span>
                  <span *ngIf="item['target'].type == 6">风振</span>
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  测点名称：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  {{item['target'].name}}
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  告警等级：
                </ion-col>
                <ion-col col-8 class="divColor divPadding">
                  <span>{{item['threshold'].name}}</span>
                </ion-col>
              </ion-row>
            </div>
            <div>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  阈值范围：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                  <span>[</span>
                  <span>{{item['threshold'].lower}}</span>
                  <span>,</span>
                  <span>{{item['threshold'].upper}}</span>
                  <span>]</span>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  当前监测数据：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                  <span>{{item.message}}</span>
                </ion-col>
              </ion-row>
              <ion-row>
                <ion-col col-4 class="divColor divPadding">
                  是否处理：
                </ion-col>
                <ion-col col-8 class="divColor divPadding sta">
                  <span>未处理</span>
                </ion-col>
              </ion-row>
            </div>
          </ion-col>
        </ion-row>
      </ion-card>


      <ion-infinite-scroll (ionInfinite)="doInfinite2($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多数据...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>


      <div class="goTop" tapmode (click)="scrollTo()" id="top" *ngIf="top">
        <span class="TOP">↑</span>
      </div>
    </div>
  </div>

  <!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)"  threshold= "500px">
    <ion-infinite-scroll-content loadingSpinner = "bubbles"  loadingText = "Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll> -->





</ion-content>